<template>
  <div :style="{ width: '100%', height: shipFactoryH + 30 + 'px' }">
    <div class="shipFactoryTitle">{{ city }}</div>
    <div class="sidemenu3">
            <el-collapse v-model="activeName" accordion>
                <div v-for="(item, i) of shipFactory.shipFactorys" >
                    <el-collapse-item :title="setItemLabel(item)" :name="i + 1">
                        <div style="margin-left:15px">
                            <el-collapse v-model="activeName2" accordion>
                                <div v-for="(con, ii) of item.conList">
                                    <el-collapse-item :title="setConLabel(con)" :name="ii + 1">
                                        <div style="text-indent:2em">{{con.conData}}</div>
                                    </el-collapse-item>
                                </div>
                            </el-collapse>
                        </div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        
        <!--<div v-for="(item, i) of shipFactorys" :key="i" class="shipFactoryItem">
      <div class="cardTitleShipFactory">{{ item.name }}</div>
      <el-card v-for="(project, ii) of item.data" :key="ii" class="box-card shipFactoryCard">
        <div class="shipFactoryRow">项目名称：<span>{{ project.projectName }}</span></div>
        <div class="shipFactoryRow">项目编号：<span>{{ project.projectCode }}</span></div>
        <div class="shipFactoryRow">项目周期：<span>{{ toDate(project.startTime) }} ~ {{ toDate(project.endTime) }}</span></div>
        <div class="shipFactoryRow">项目总额：<span>{{ project.receivable }}元</span></div>
        <div class="shipFactoryRow">技术负责人：<span>{{ project.chief }}</span></div>
      </el-card>
    </div>-->
    </div>
  </div>
</template>
<!-- 船厂 进行中的项目信息（首页 应用） -->
<script>
export default {
  name: 'ShipFactory',
  props: {
      shipFactory: { required: false, type: Object, default: null },
      shipFactoryH: { required: true, type: Number },
  },
  data() {
    return {
      city: '',
      //shipFactorys: [],
        projects: [],
        activeName: '1',
        activeName2:'1'
    }
  },
  watch: {
      shipFactory(val) {
          this.activeName = 1,
              this.activeName2 = 0,
      this.setData()
    }
  },
        methods: {
            setItemLabel(item) {
                var a = '●' + item.label;
                var b = item.label;
                return b
            },
            setConLabel(item) {
                var a;
                var b;
                a = '▲' + item.conName;
                b = item.conName;
                return b
            },
    setData() {
      this.city = this.shipFactory.city
          this.projects = [
              { factory: '4801', projectName: '等级修理20221125001', projectCode: 'GR20221125001', startDate: '2022-01-01', endDate: '2022-02-01', ze: '1200000', cy: '曹力' },
              { factory: '4802', projectName: '等级修理20221125002', projectCode: 'GR20221125002', startDate: '2022-02-01', endDate: '2022-03-01', ze: '1500000', cy: '水晶晶' },
              { factory: '4805', projectName: '等级修理20221125003', projectCode: 'GR20221125003', startDate: '2022-03-01', endDate: '2022-04-01', ze: '1150000', cy: '曹力' },
              { factory: '4805', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4806', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4807', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4808', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4810', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4810', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4819', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4819', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4822', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4822', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
              { factory: '4822', projectName: '等级修理20221125004', projectCode: 'GR20221125004', startDate: '2022-04-01', endDate: '2022-05-01', ze: '1800000', cy: '水晶晶' },
          ];
      //var shipFactoryData = JSON.parse(JSON.stringify(this.shipFactory.shipFactoryData))
      //var shipFactorys = shipFactoryData.map(e => {
      //  var obj = {
      //    id: e.yardID,
      //    name: e.fullName,
      //    data: [] // this.projects.filter(item => e.includes(item.factory))
      //  }
      //  return obj
      //})
      //api.GetProjectGRinYards(
      //  shipFactoryData.map(e => e.yardID)
      //).then(res => {
      //  // console.log('项目信息', res)
      //  shipFactorys.map(e => {
      //    e.data = res[e.id]
      //    return e
      //  })
      //  this.shipFactorys = shipFactorys
      //}).catch(() => {
      //  this.shipFactorys = shipFactorys
      //})
    },

    format(ops, op, hasops) {
      var val = null
      if (hasops) {
        var options = ops.map(e => {
          return e.options
        }).flat().valueOf()
        val = options.find(e => e.value === op)
      } else {
        val = ops.find(e => e.value === op)
      }
      return val ? val.label : ''
    },
    toDate(val) {
      return val ? this.$moment(val).format('YYYY-MM-DD') : ''
    }
        },
        template: "#template"
}
</script>

